import React, { ReactElement, useContext } from 'react';
import { View } from 'react-native';

import Mask from '../../../../../../components/Mask';
import { phonePx } from '../../../../../../util/adapt';
import { CLASS_ROOM_RIGHT_SCALE } from '../../../../constant';
import {
  playMessageWithId,
  setBubbleMessageList,
  setShowRecord
} from '../../actions';
import { MessageType } from '../../constant';
import { Store } from '../../reducer';
import PlayVoice, { PlayVoiceType } from '../PlayVoice';
import TextMessage, { TextMessageType } from '../TextMessage';
import styles from './style';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { bubbleMessageList } = state;

  if (bubbleMessageList.length === 0) return <View />;
  return (
    <Mask style={styles.container} resAlpha={0.5} animatedDuration={400}>
      {bubbleMessageList.map(
        (message): ReactElement => {
          if (message.type === MessageType.Voice) {
            return (
              <PlayVoice
                playVoiceType={PlayVoiceType.Bubble}
                message={message}
                style={styles.message}
                play={(): void => {
                  playMessageWithId(message);
                  setShowRecord(true);
                  setBubbleMessageList([]);
                }}
              />
            );
          }
          if (message.type === MessageType.Text) {
            return (
              <TextMessage
                textMessageType={TextMessageType.Bubble}
                message={message}
                style={styles.message}
                numberOfLines={1}
                maxWidth={phonePx(136) * CLASS_ROOM_RIGHT_SCALE}
              />
            );
          }
          return <View />;
        }
      )}
    </Mask>
  );
};
